<template>
 <div>
   <Card class="card">
     <p slot="title">导航列表</p>
     <Button slot="extra" type="primary" size="small" @click="modal=true; modalTitle='新增导航'">新增导航</Button>
     <div class="tableWrap">
       <Table border stripe :columns="columns" :data="data"></Table>
     </div>
   </Card>
   <Modal v-model="modal" @on-visible-change="hideHandle">
     <p slot="header">{{modalTitle}}</p>
     <div>
       <Form ref="form" :model="form" :label-width="80">
         <FormItem label="名称">
           <Input v-model="form.nav_name"></Input>
         </FormItem>
         <FormItem label="地址">
           <Input v-model="form.url"></Input>
         </FormItem>
         <FormItem label="顺序">
           <Input v-model="form.order"></Input>
         </FormItem>
         <FormItem label="显示状态">
           <Select v-model="form.status">
             <Option :value="1">显示</Option>
             <Option :value="0">隐藏</Option>
           </Select>
         </FormItem>
       </Form>
     </div>
     <div slot="footer">
       <Button type="primary" @click="handleForm">确定</Button>
       <Button @click="modal=false">取消</Button>
     </div>
   </Modal>
 </div>
</template>

<script>
import axios from 'axios'
import API_URL from '@/api/api'
import { deepClone } from '@/libs/util'
export default {
  name: 'nav-list',
  data () {
    return {
      columns: [
        {
          title: '名称',
          key: 'nav_name'
        },
        {
          title: '地址',
          key: 'url'
        },
        {
          title: '显示状态',
          render: (h, params) => {
            return h('span', params.row.status ? '显示' : '隐藏')
          }
        },
        {
          title: '顺序',
          key: 'order'
        },
        {
          title: '添加时间',
          key: 'add_time'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    for (let key in this.form) {
                      this.form[key] = params.row[key]
                    }
                    this.modalTitle = '修改导航'
                    this.modal = true
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.row._id)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data: [],
      modal: false,
      modalTitle: '新增导航',
      form: {
        _id: '',
        nav_name: '',
        url: '',
        status: 1,
        order: ''
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    remove (_id) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>确定删除此条信息？</p>',
        onOk: async () => {
          let result = await axios.post(API_URL.removeNav, { _id }).then(res => {
            return res.data
          })
          if (result.code === 0) {
            this.$Message.success(result.message)
            this.init()
            this.$Modal.remove()
          } else if (result.code === 9999) {
            this.$Message.error(result.message)
            this.$router.push({ name: 'login' })
          } else {
            this.$Message.error(result.message)
          }
        }
      })
    },
    async init () {
      let result = await axios.get(API_URL.navList).then(res => {
        return res.data
      })
      if (result.code === 0) {
        this.data = result.data.list
      } else if (result.code === 9999) {
        this.$Message.error(result.message)
        this.$router.push({ name: 'login' })
      }
    },
    async handleForm () {
      let submitData = deepClone(this.form)
      let result = await axios.post(API_URL.handleNav, submitData).then(res => {
        return res.data
      })
      if (result.code === 0) {
        this.$Message.success(result.message)
        this.init()
        this.modal = false
      } else if (result.code === 9999) {
        this.$Message.error(result.message)
        this.$router.push({ name: 'login' })
      } else {
        this.$Message.error(result.message)
      }
    },
    hideHandle (flag) {
      if (!flag) {
        for (let key in this.form) {
          this.form[key] = ''
        }
        this.form.status = 1
      }
    }
  }
}
</script>
